import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface BarNegativeProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: object;
    grid?: object;
    yAxisData?: string[];
    seriesData?: number[];
    seriesName?: string;
}

@customElement('lit-bar-negative')
export class LitBarNegative extends LitElement {
    @property({type: String}) chartId: string = 'lit-bar-negative-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = {
        text: 'Bar Chart with Negative Value'
    };
    @property({type: Object}) grid: any = {
        top: 80,
        bottom: 30
    };
    @property({type: Array}) yAxisData: string[] = [
        'ten',
        'nine',
        'eight',
        'seven',
        'six',
        'five',
        'four',
        'three',
        'two',
        'one'
    ];
    @property({type: Array}) seriesData: number[] = [
        -0.07,
        -0.09,
        0.2,
        0.44,
        -0.23,
        0.08,
        -0.17,
        0.47,
        -0.36,
        0.18
    ];
    @property({type: String}) seriesName: string = 'Cost';

    labelRight: any = {
        position: 'right'
    };

    getSeriesData() {
        return this.seriesData.map(value => {
            if (value < 0) {
                return { value, label: this.labelRight };
            }
            return value;
        });
    }

    option: echarts.EChartsOption = {
        title: this.title,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: this.grid,
        xAxis: {
            type: 'value',
            position: 'top',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'category',
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            data: this.yAxisData
        },
        series: [
            {
                name: this.seriesName,
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true,
                    formatter: '{b}'
                },
                data: this.getSeriesData()
            }
        ]
    };

    static styles = style;

    updated() {
        this.option.title = this.title;
        this.option.grid = this.grid;
        (this.option.yAxis as any).data = this.yAxisData;
        (this.option.series as any)[0].data = this.getSeriesData();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-bar-negative': LitBarNegative;
    }
}